/**
 * Variables
 *
 * The majority of the configuration for the toolkit.
 */

//==============================================================================
// Containers
//==============================================================================

$x-small: 600px !default;
$small: 800px !default;
$medium: 1000px !default;
$large: 1200px !default;

//==============================================================================
// Breakpoints
//==============================================================================

$mobile: $x-small !default;
$tablet: $small !default;
$desktop: $medium !default;

//==============================================================================
// Global Colors
//==============================================================================

$background: white !default;
$primary-color: #0366ee !default;
$secondary-color: #29de7d !default;
$accent-color: #cdcdcd !default;
$alternate-background: #fafafa !default;
$alternate-color: #404040 !default;
$link-color: $primary-color !default;
$link-hover-color: darken($link-color, 15%) !default;
$highlight: #ffeea8 !default;
$error: #d33c40 !default;
$success: #29de7d !default;
$bq-border: 16px solid #f0f0f0 !default;

//==============================================================================
// Typography
//==============================================================================

// Body
$font-size: 1rem !default;
$body-font-size: 1rem !default;
$font-style: normal !default;
$font-variant: normal !default;
$font-weight: normal !default;
$font-color: #404040 !default;
$font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$line-height: 1.6 !default;

// Headings
$heading-font-color: #404040 !default;
$heading-font-weight: 600 !default;
$heading-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial,
  sans-serif !default;
$heading-line-height: 1.2 !default;

$h1-mobile: 1.75rem !default;
$h2-mobile: 1.5rem !default;
$h3-mobile: 1.25rem !default;
$h4-mobile: 1.1rem !default;
$h5-mobile: 1rem !default;

$h1: 2.25rem !default;
$h2: 2rem !default;
$h3: 1.75rem !default;
$h4: 1.5rem !default;
$h5: 1.25rem !default;

//==============================================================================
// Spacing
//==============================================================================

$padding: 1rem !default;
$margins: 1.5rem !default;
$content-padding: 60px 0 !default;
$content-padding-mobile: 30px 0 !default;

//==============================================================================
// Borders
//==============================================================================

$border-width: 1px !default;
$border-style: solid !default;
$border-color: #dedede !default;
$border-radius: 4px !default;
$borders: $border-width $border-style $border-color !default;

//==============================================================================
// Buttons
//==============================================================================

$button-background: $primary-color !default;
$button-background-hover: darken($button-background, 10%) !default;
$button-color: #ffffff !default;
$button-font-weight: 600 !default;
$button-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$button-font-size: 1rem !default;
$button-border-width: 1px !default;
$button-border-style: solid !default;
$button-border-color: $button-background !default;
$button-border-radius: $border-radius !default;
$button-text-transform: none !default;

// Accent buttons
$accent-button-background: $secondary-color !default;
$accent-button-color: #ffffff !default;
$accent-button-color-hover: #ffffff !default;

// Muted Buttons
$muted-border: 1px solid $accent-color !default;
$muted-border-hover: 1px solid darken($accent-color, 30%) !default;
$muted-background: transparent !default;
$muted-background-hover: transparent !default;
$muted-color: darken($accent-color, 50%) !default;
$muted-color-hover: darken($accent-color, 50%) !default;

// Round Buttons
$round-buttons: 40px !default;

//==============================================================================
// Forms
//==============================================================================

$forms: (
  '[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email],        [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], [type=week], [type=time], select, textarea'
) !default;
$buttons: ('.button, a.button, button, [type=submit], [type=reset], [type=button]') !default;
$input-background: transparent !default;
$placeholder: darken($accent-color, 20%) !default;
$form-border: 1px solid $border-color !default;
$form-border-hover: 1px solid darken($border-color, 10%) !default;
$form-border-focus: 1px solid $link-color !default;

//==============================================================================
// Tables
//==============================================================================

$stripes: #f8f8f8 !default;
$caption: #ababab !default;

//==============================================================================
// Code
//==============================================================================

$code-color: $font-color !default;
$code-size: 14px !default;
$code-family: Menlo, monospace !default;
$code-background: transparent !default;
$code-borders: $borders !default;
